<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="<%=application.getContextPath()%>/nresources/ued/css/all-src.css" type="text/css" rel="stylesheet"/>
    <title>大屏展现列表</title>
    <%@include file="/WEB-INF/ibnms/common/jqgrid.jsp" %>
    <style type="text/css">
        select {
            width: auto;
        }

        div.ui-jqgrid-bdiv {
            overflow: hidden;
        }

        .view {
            background-image: url("<%=application.getContextPath()%>/nresources/ued/images/right.png");
            width: 18px;
            height: 18px;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
        }

        .operation {
            width: 24px;
            margin-right: 8px;
            display: inline-block;
        }

        .operation img {
            width: 12px;
            height: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="form-wrapper">
    <div class="form-title">
        <span class="ttcorner"></span>

        <h3>
            <span class="text">物理屏管理</span>
        </h3>
    </div>
    <div class="box-in">
        <table border="0" cellspacing="0" cellpadding="0" class="table-03">
            <tr>
                <td class="monitor_bg1" height="13" align="right" nowrap>
                    物理屏名：
                    <input type="text" class="input-style1" id="queryPhysicalScreenName"/>
                    <input type="button" class="btn-style02" id="btn-search" value="查询"/>
                </td>
            </tr>
        </table>
    </div>
    <div class="title-style"><a class="fold-tip"></a></div>
    <div class="block02">
        <div class="title-style02">
            <input class="btn-style02" type="button" id="btn-add" value="增加">&nbsp;&nbsp;
            <input class="btn-style02" type="button" id="btn-edit" value="修改">&nbsp;&nbsp;
            <input class="btn-style02" type="button" id="btn-del" value="删除">&nbsp;&nbsp;
        </div>
        <table id="gridTable">
        </table>
        <div id="gridPager">
        </div>
    </div>
</div>
<div id="addPhysicalScreenPanel" style="display: none;">
    <div class="box-in">
        <table border="0" cellspacing="0" cellpadding="0" class="table-03">
            <tr>
                <td class="monitor_bg1" height="13" align="right" nowrap>
                    物理屏名称：
                    <input type="hidden" id="formPhysicalScreenId">
                    <input type="text" id="formPhysicalScreenName" class="input-style1"/>
                </td>
            </tr>
        </table>
    </div>

    <div class="form-title">
        <span class="ttcorner"></span>
        <h3>
            <span class="text">逻辑屏列表:</span>
        </h3>
    </div>
    <div class="block02">
        <div class="title-style02">
            <input class="btn-style02" type="button" id="btn-add-logical" value="增加">&nbsp;&nbsp;
            <input class="btn-style02" type="button" id="btn-unrelated-logical" value="删除">
        </div>
        <table id="logicalGridTable">
        </table>
    </div>
    <div class="block03">
        <input type="button" id="btn-save" class="btn-style02" value="保存"/>&nbsp;&nbsp;
        <input type="button" id="btn-cancel" class="btn-style02" value="取消"/>
    </div>
</div>
<div id="logicalScreenListPanel" class="form-wrapper" style="display: none;">
    <iframe frameborder="0" width="100%" height="600px"
            src=""></iframe>
</div>
</body>
<script type="text/javascript">
    var globalParam = {
        currentPhysicalId: "null",
        layout: {
            "layout-single": "单个面板", "layout-left-right": "两侧面板",
            "layout-field": "田字布局", "layout-grid-left": "三个面板-左", "layout-grid-right": "三个面板-右"
        },
        animate:{}
    };
    $(function () {
        $.getJSON("<%=application.getContextPath()%>/ibnms/cfg/logical-screen-animate.json", function (data) {
            var optionTemplate = $("<option>");
            var $select = $("#formSwitchAnimation").children();
            var animate = {};
            for (var i = 0; i < data.length; i++) {
                animate[data[i].value] = data[i].name;
            }
            globalParam.animate = animate;
        });
        $("#gridTable").jqGrid({
            url: "<s:url action="physicalScreenJson" namespace="/ibnms/bigscreen"/>",
            datatype: "json",
            mtype: "POST",
            height: "100%",
            autowidth: true,
            colNames: ['物理屏ID', '物理屏名称', '逻辑屏数量'],
            colModel: [
                {name: 'PHYSICAL_SCREEN_ID', index: 'PHYSICAL_SCREEN_ID', hidden: true},
                {
                    name: 'PHYSICAL_SCREEN_NAME',
                    index: 'PHYSICAL_SCREEN_NAME',
                    formatter: function (val, option, row) {
                        return '<span class="view" title="点击查看切换动画效果" onclick="viewScreen(\'' + row.PHYSICAL_SCREEN_ID + '\')"></span>' + val;
                    }
                },
                {name: 'LOGICAL_SCREEN_COUNT', index: 'LOGICAL_SCREEN_COUNT', width: "100px"}
            ],
            viewrecords: true,
            rowNum: 15,
            rowList: [10, 15, 30],
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                subgrid: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: false
                }
            },
            pager: "#gridPager",
            hidegrid: true,
            multiselect: true,
            beforeRequest: function () {
                var postData = {"form.physicalScreenName": $("#queryPhysicalScreenName").val()};
                $.extend($("#gridTable").getGridParam("postData"), postData);
            }
        });
        $("#logicalGridTable").jqGrid({
            url: "<s:url action="queryLogicalScreenByPhysicalId" namespace="/ibnms/bigscreen"/>",
            datatype: "json",
            mtype: "POST",
            height: "100%",
            autowidth: true,
            colNames: ['逻辑屏id', '逻辑屏名称ID', '逻辑屏名称', '切换动画id', '切换动画', '显示时长', '面板布局', '显示时长ID', '面板布局ID'],
            colModel: [
                {name: 'logicalScreenId', index: 'LOGICAL_SCREEN_ID', hidden: true},
                {name: 'logicalScreenName', index: 'LOGICAL_SCREEN_NAME', hidden: true},
                {
                    name: 'logicalScreenNameVo', index: 'LOGICAL_SCREEN_NAME', formatter: function (val, option, row) {
                    return '<div class="operation"><img src="/portal/ibnms/img/arrow-left.png" onclick="moveScreen(\'up\',\'' + option.rowId + '\')" title="上移">' +
                            '<img title="下移" onclick="moveScreen(\'down\',' + option.rowId + ')" src="/portal/ibnms/img/arrow-right.png"></div>' + row.logicalScreenName;
                }
                },
                {name: 'switchAnimation', index: 'SWITCH_ANIMATION', hidden: true},
                {
                    name: 'switchAnimationName', index: 'SWITCH_ANIMATION', formatter: function (val, op, row) {
                    return globalParam.animate[row.switchAnimation];
                }
                },
                {
                    name: 'showSecondsName', index: 'SHOW_SECONDS', formatter: function (val, op, row) {
                    return row.showSeconds + "秒";
                }
                },
                {
                    name: 'layoutName', index: 'LAYOUT', formatter: function (val, op, row) {
                    return globalParam.layout[row.layout];
                }
                },
                {name: 'showSeconds', hidden: true, index: 'SHOW_SECONDS'},
                {name: 'layout', hidden: true, index: 'LAYOUT'}
            ],
            viewrecords: true,
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                subgrid: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: false
                }
            },
            hidegrid: true,
            multiselect: true,
            beforeRequest: function () {
                var postData = {};
                postData["physicalScreenId"] = globalParam.currentPhysicalId;
                $.extend($("#logicalGridTable").getGridParam("postData"), postData);
            }
        });
    });

    $(function () {
        $(".title-style a.fold-tip").toggle(toggletip, toggletip);
        function toggletip() {
            if ($(this).attr("class").split("unfold-tip").length > 1) {
                $(this).removeClass("unfold-tip");
                $(this).parents().prev(".box-in").show("fast");
            } else {
                $(this).addClass("unfold-tip");
                $(this).parents().prev(".box-in").hide("fast");
            }
        }

        $("#addPhysicalScreenPanel").show().dialog({
            title: "增加物理屏",
            width: 700,
            modal: true,
            resizable: false,
            autoOpen: false
        });
        $("#logicalScreenListPanel").show().dialog({
            title: "选择逻辑屏",
            width: 800,
            modal: true,
            resizable: false,
            autoOpen: false,
            open: function () {
                //$("iframe")[0].contentWindow.reloadGrid();
            }
        });
        $("#btn-add-logical").click(function () {
            $("#logicalScreenListPanel").dialog("open").children()
                    .attr("src", "<%=application.getContextPath()%>/ibnms/bigscreen/logicalScreen.action?physicalScreenId=" +
                    globalParam.currentPhysicalId);

        });
        $("#btn-unrelated-logical").click(function () {
            var idArr = jQuery("#logicalGridTable").jqGrid('getGridParam', 'selarrrow');
            switch (idArr.length) {
                case 0:
                    alert("请先选择要删除的记录!");
                    break;
                default:
                    idArray = idArr.slice(0);
                    for (var i = 0; i < idArray.length; i++) {
                        jQuery("#logicalGridTable").jqGrid("delRowData", idArray[i]);
                    }
            }
        });
        $("#btn-save").click(function () {
            var id = $("#formPhysicalScreenId").val();
            var name = $("#formPhysicalScreenName").val();
            validateForm(id, name, function () {
                var param = ["form.physicalScreenId=" + id, "form.physicalScreenName=" + name];
                var data = $("#logicalGridTable").jqGrid("getRowData");
                for (var i = 0; i < data.length; i++) {
                    param.push("ids=" + data[i].logicalScreenId);
                }
                $.ajax({
                    url: "<s:url action="addPhysicalScreen" namespace="/ibnms/bigscreen"/>",
                    cache: false,
                    type: "POST",
                    async: true,
                    data: param.join("&"),
                    success: function () {
                        $("#addPhysicalScreenPanel").dialog("close");
                        $("#gridTable").trigger("reloadGrid", [{page: 1}]);
                    },
                    error: function () {

                    }
                });
            });
        });

        $("#btn-cancel").click(function () {
            $("#addPhysicalScreenPanel").dialog("close");
        });

        $("#btn-search").click(function () {
            $("#gridTable").trigger("reloadGrid", [{page: 1}]);
        });

        $("#btn-add").click(function () {
            globalParam.currentPhysicalId = "null";
            $("#addPhysicalScreenPanel").dialog("open");
            $("#logicalGridTable").trigger("reloadGrid", [{page: 1}]);
            $("#formPhysicalScreenId,#formPhysicalScreenName").val("");
        });
        $("#btn-del").click(function () {
            var idArr = jQuery("#gridTable").jqGrid('getGridParam', 'selarrrow');
            if (idArr.length == 0) {
                alert("请先选择要删除的记录!");
                return;
            }
            if (confirm("是否删除所选的记录?")) {
                var LOGIN_ID = "";
                for (var one in idArr) {
                    var data = jQuery("#gridTable").jqGrid('getRowData', idArr[one]);
                    LOGIN_ID += data.PHYSICAL_SCREEN_ID + "!!";
                }
                if (LOGIN_ID.length > 0) {
                    LOGIN_ID = LOGIN_ID.substring(0, LOGIN_ID.length - 2);
                }
                $.ajax({
                    type: "POST",
                    async: false,
                    url: "<s:url action="deletePhysicalScreen" namespace="/ibnms/bigscreen"/>?form.physicalScreenId=" + LOGIN_ID,
                    success: function (data) {
                        $("#gridTable").trigger('reloadGrid');
                    },
                    error: function (xhr) {
                    }
                });
            }
        });
        $("#btn-edit").click(function () {
            var idArr = jQuery("#gridTable").jqGrid('getGridParam', 'selarrrow');
            switch (idArr.length) {
                case 0:
                    alert("请先选择要修改的记录!");
                    break;
                case 1:
                    var data = jQuery("#gridTable").jqGrid('getRowData', idArr[0]);
                    $("#formPhysicalScreenId").val(data.PHYSICAL_SCREEN_ID);
                    $("#formPhysicalScreenName").val(data.PHYSICAL_SCREEN_NAME.substring(data.PHYSICAL_SCREEN_NAME.toLowerCase().indexOf("</span>") + 7));
                    $("#addPhysicalScreenPanel").dialog("open");
                    globalParam.currentPhysicalId = data.PHYSICAL_SCREEN_ID;
                    $("#logicalGridTable").trigger("reloadGrid", [{page: 1}]);
                    break;
                default:
                    alert("一次只能修改一条记录!");
            }
        });
    });
    function relatedLogicalScreen(screens, index) {
        var $logicalGridTable = $("#logicalGridTable");
        for (var i = 0; i < screens.length; i++) {
            $logicalGridTable.jqGrid("addRowData", (index + i + 1), screens[i]);
        }
        $("#logicalScreenListPanel").dialog("close");
    }

    function validateForm(id, name, callback) {
        if (name == "") {
            alert("物理屏名字不能为空！");
            return false;
        }
        $.get("<s:url action="ifPhysicalNameExist" namespace="/ibnms/bigscreen"/>", {
            "form.physicalScreenId": id,
            "form.physicalScreenName": name
        }, function (data) {
            if (data === true) {
                alert("已经存在相同名字的物理屏！");
            } else {
                callback();
            }
        });
    }

    function viewScreen(screenId) {
        window.open("<%=application.getContextPath()%>/0/bigscreen.jsp?physicalScreenId=" + screenId, "screen",
                "height=" + (window.screen.height - 100) + ", width=" + (window.screen.availWidth - 10) + ", top=0, left=0, toolbar=no, menubar=no, scrollbars=no," +
                "resizable=yes, location=no, status=no");
    }

    function getExistLogicalScreenIds() {
        var data = $("#logicalGridTable").jqGrid("getRowData");
        var idArray = [];
        for (var i = 0; i < data.length; i++) {
            idArray.push(data[i].logicalScreenId);
        }
        return idArray;
    }

    function moveScreen(type, rowid) {
        var gridTable = jQuery("#logicalGridTable");
        var dataArray = gridTable.jqGrid('getRowData');
        if ((type == "up" && rowid == 1) || (type == "down" && rowid == dataArray.length)) {
            return;
        }
        var data = gridTable.jqGrid('getRowData', rowid);
        if (type == "up") {
            var prevId = rowid - 1;
            var prev = gridTable.jqGrid('getRowData', prevId);
            gridTable.jqGrid('setRowData', rowid, prev);
            gridTable.jqGrid('setRowData', prevId, data);

        } else {
            var nextId = rowid + 1;
            var next = gridTable.jqGrid('getRowData', nextId);
            gridTable.jqGrid('setRowData', rowid, next);
            gridTable.jqGrid('setRowData', nextId, data);
        }
    }
</script>
</html>
